<!DOCTYPE html>
<html>
    <head>
        <title>Flask Whoosh~~~</title>
        <script src="/static/js/vue/vue.js"></script>
        <script src="/static/js/axios/axios.min.js"></script>
        <script src="/static/js/element-ui/index.js"></script>
        <link rel="stylesheet" href="/static/css/element-ui/index.css">
    </head>

    <body>
        <div id="app">
            <el-container>
                <el-header class="page-header" :class="{ 'initialization': initialization, 'uninitialization':!initialization }">
                    <div class="logo">
                        Flask Whoosh!!!
                    </div>
                    <el-input placeholder="请输入搜索内容" v-model="input" class="input-for-search" @change="search">
                        <el-button slot="append" icon="el-icon-search"  @click="search" ></el-button>
                    </el-input>
                    <div class="logo-img-div">
                        <img v-if="initialization"
                        class="logo-img"
                        src="/static/img/search_for_data.png" />
                    </div>
                    
                </el-header>

                <el-container v-if="datasets.length || is_last_page " v-loading="fullscreenLoading">
                    <el-main class="results">
                        <div v-if="datasets.length==0 && is_last_page" class="no-results">
                            <div class="no-results-text">没有搜索到相关结果</div>
                            <img  class="no-results-img" src="/static/img/search_without_result.png" />
                            
                        </div>
                        
                        <a v-for="data in datasets" :key="data" :href="data[url_field]">
                            <el-card  class="box-card">
                                <div slot="header"  class="header" >
                                    <div v-for="k in showInTitle" class="title">
                                        <span v-if=" showName.indexOf(k) ">{[ config[k]['name'] ]}:</span>
                                        <span>{[ data[k] ]}</span>
                                    </div>
                                    <div v-for="k in showInSubTitle" class="sub_title">
                                        <span v-if=" showName.indexOf(k) ">{[ config[k]['name'] ]}:</span>
                                        <span>{[ data[k] ]}</span>
                                    </div>
                                </div>
                                <div v-for="k in showInContent" class="content">
                                    <span v-if=" showName.indexOf(k) ">{[ config[k]['name'] ]}:</span>
                                    <span>{[ data[k] ]}</span>
                                </div>
                            </el-card>
                        </a>
                        <div v-if="datasets.length>0 && !is_last_page" class="more-search-control" 
                            @click="moreSearch" v-loading="more_search_loading" >
                            <i class="el-icon-caret-bottom"></i>
                            <span>点击查询更多</span>
                        </div>
                        <div v-if="datasets.length>0 && is_last_page"  class="no-more-search-control" >
                            <span>没有更多了</span>
                        </div>
                    </el-main>
                    <el-aside class="options-aside">
                        <div>
                            <div>查询涉及的字段：</div>
                            <el-select v-model="selected_fields" 
                                placeholder="搜索字段" 
                                filterable
                                multiple
                                class="advance-options"
                            >
                                <el-option  v-for="field in select_options" 
                                    :label="config[field]['name']" 
                                    :value="field" >
                                </el-option>     
                            </el-select>
                        </div>
                        <div>
                            <div>每次查询多少条：</div>
                            <el-input-number v-model="pagelen"
                                min="1"
                                max="100"
                                class="advance-options">
                            </el-input-number>
                        </div>
                        <div v-if="date_field">
                            <div>{[config[date_field]['name']]}：</div>
                           
                            <el-date-picker
                                v-model="date_start_to_end"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions"
                                class="advance-options">
                            </el-date-picker>
                        </div>
                    </el-aside>
                </el-container>
            </el-container>
        </div>
    </body>
    <script>
        // 从flask传输过来的jinja2参数，转变为js中的vue可用参数
        var config = {{config|tojson}};
    </script>

    <link rel="stylesheet" href="/static/css/index.css">
    <script src="/static/js/index.js"></script>
      
</html>
